<template>
  <q-card flat>
    <q-item dense class="q-px-sm">
      <q-item-section>
        <div class="row items-center">
          <div>
            <q-icon size="24px" color="green-5" name="supervisor_account"></q-icon>
          </div>
          <div class="q-pl-sm">作者热榜</div>
        </div>
      </q-item-section>

      <q-item-section class="col-auto">
        <q-btn dense round flat icon="arrow_forward" to="/ranking/readUser" />
      </q-item-section>
    </q-item>

    <q-separator />
    <q-item
      clickable
      dense
      class="q-px-sm"
      :to="{
        path: '/personal/' + item.id + '/create',
      }"
      v-for="(item, index) in rows"
      :key="item.id"
    >
      <q-item-section>
        <div class="row items-center">
          <div class="q-pl-sm">
            <q-avatar size="32px">
              <q-img :src="item.avatar" :ratio="1 / 1" errorSrc="/images/default-avatar.png" />
            </q-avatar>
          </div>
          <div class="q-pl-sm col">
            <div class="text-teal-4 line-clamp-1">
              {{ item.username }}
            </div>
            <div class="text-caption line-clamp-1">
              {{ item.summary }}
            </div>
          </div>

          <div class="q-pl-sm row justify-center">
            <q-chip class="text-teal-5" dense>
              <q-icon name="timeline" />
              <span>{{ item.readNum }}</span>
            </q-chip>
          </div>
          <div class="q-pl-sm">
            <q-btn
              :loading="btnLoad[index]"
              dense
              :color="item.followFlag ? 'positive' : 'info'"
              flat
              :label="item.followFlag ? '取关' : '关注'"
              @click.prevent="
                async () => {
                  btnLoad[index] = true
                  const { data, error } = await globalFollowUser({
                    userId: item.id,
                  })
                  btnLoad[index] = false
                  if (error) {
                    return
                  }
                  item.followFlag = data
                  Ok(data ? '关注成功' : '已取消关注')
                }
              "
            />
          </div>
        </div>
      </q-item-section>
    </q-item>
  </q-card>
</template>

<script setup lang="ts">
import type { ApiType } from 'src/service/api'
import { globalFollowUser, mainHotUser } from 'src/service/api'
import { useYuan } from 'src/use'
import { onActivated, onMounted, ref } from 'vue'

const rows = ref<ApiType<typeof mainHotUser>['Return']>([])

const btnLoad = ref<Array<boolean>>([])
const { Ok } = useYuan()
const f5 = async () => {
  const { data, error } = await mainHotUser()
  if (error) {
    return
  }
  rows.value = data
}

onMounted(() => {
  f5()
})

onActivated(() => {
  f5()
})
</script>

<style scoped></style>
